src/routes/girls/[language]/+page.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<script lang="ts">
import Senpy from '$lib/Data/senpy';
import Message from '$lib/Loading/Message.svelte';
import Skeleton from '$lib/Loading/Skeleton.svelte';
import '$styles/girls.scss';

export let data;
</script>

<div class="card">
  {#await Senpy.getImages(data.language)}
    <Message message="Loading images ..." />

    <Skeleton grid={true} count={1} width="49%" height="16.25em" />
  {:then images}
    <div class="images">
      {#each images as image}
        <a href={image} target="_blank">
          <div class="preview">
            <img src={image} alt="An anime girl holding a programming book" />
          </div>
        </a>
      {/each}
    </div>
  {/await}
</div>

<style lang="scss">
  .images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16.25em, 1fr));
    gap: 1em;

    img {
      border-radius: 8px;
      width: 100%;
    }
  }
</style>